define(function(require, exports, module) {

  var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('underscore');
  var jsonview = require('jsonview');
  var tmpl = require('text!../tmpl.html');

  require(['css!hy5b/frontend/modal/modal.css']);

  function main() {
    var $app = $('<div id="app">');
    $('#main').html($app);

    $app.append(tmpl);

    require([
      'ext',
      'hy5b/frontend/canvas/hline',
      'hy5b/frontend/modal/index',
      'hy5b/frontend/util',
      'base64',
      'https://cdn.bootcss.com/rasterizehtml/1.3.0/rasterizeHTML.allinone.js'
    ], function(t, hline, modal, hy5bUtil, base64, rasterizeHTML) {

      aaaa()

      $('#prtscr1').click(aaaa)
      $('#prtscr2').click(bbbb)
      $('#prtscr3').click(svg)

      function aaaa() {
        var doc = $("#aaaa")[0];
        var documentElement = doc.documentElement || doc.ownerDocument.documentElement;
        documentElement.setAttribute("xmlns", documentElement.namespaceURI);

        // Get well-formed markup
        var html = (new XMLSerializer).serializeToString(doc);

        var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
          '<foreignObject width="100%" height="100%">' + html +
          '</foreignObject>' +
          '</svg>';

        var url = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(data)));

        // modal($('<img src="' + url + '">')).show();

        $('#canvas')
          .clearCanvas()
          .drawImage({
            src: url
          });
      }

      function bbbb() {
        var elem = document.getElementById('bbbb');

        var canvas = document.getElementById("canvas"),
          html = (new XMLSerializer).serializeToString(elem);

        rasterizeHTML.drawHTML(html)
          .then(function(d) {
            var ctx = canvas.getContext('2d');
            var image = d.image;
            ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight)
            ctx.drawImage(d.image, 0, 0, image.width, image.height, 0, 0, image.width, image.height);
          })
      }

      function svg() {
        $.ajax({
          url: '/assets/svg/twitter.svg',
          dataType: 'text'
        }).success(function(data) {

          // var DOMURL = window.URL || window.webkitURL || window;

          // var svg = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
          // var url = DOMURL.createObjectURL(svg);

          var url = 'data:image/svg+xml;base64,' + btoa(data);

          var dWidth = 18,
            dHeight = 18;

          $('#canvas')
            .clearCanvas()
            // .drawText({
            //   text: 'cccc'
            // })
            .drawImage({
              src: url,
              // sWidth: dWidth,
              // sHeight: dHeight,
              dWidth: dWidth,
              dHeight: dHeight
            })

          var _zoom = 1;
          t.mouseWheel(document.getElementById('canvas'), function(e) {
            var direct = 0;
            e = e || window.event;

            var delta = e.wheelDelta // Webkit
              || -e.detail; // Firefox
            var scale = delta > 0 ? 1.1 : 1 / 1.1;

            _zoom = _zoom * scale;

            p(_zoom)

            var width = _zoom * dWidth;
            var height = _zoom * dHeight;

            $('#canvas')
              .clearCanvas()
              // .drawText({
              //   text: 'cccc'
              // })
              .drawImage({
                src: url,
                dWidth: Math.ceil(width),
                dHeight: Math.ceil(height)
              })
              .mousemove(function(eve) {
                $('.mousemove').html(eve.clientX + ', ' + eve.clientY);
              });

            e.preventDefault();
          }, false)  
        })
      }
    })
  }

  return main;
})
